<template>
  <div id="app">
    <h1>根组件-{{ title }}-{{ count }}</h1>
    <h3>通过引入mapState和mapMutations，实现获取数据和仓库方法直接使用</h3>
    <input
      type="text"
      v-model="inp"
      placeholder="可修改标题和增减数字"
    /><br /><br />

    <button @click="setTitle(inp)">改标题</button>
    <button @click="optCount(['+', +inp])">加数字</button>
    <button @click="optCount(['-', +inp])">减数字</button>
    <button @click="optCount(['*', +inp])">让控制台报错</button>
    <button @click="changeCountAction(888)">三秒后改count为888</button
    ><br /><br />
    <input
      type="text"
      :value="count"
      placeholder="实时更新count"
      @input="hdOptCount"
    /><br /><br />
    <div>{{ filterList }}</div>
    <hr>
    <div>访问模块中的state</div>
   <div>{{userinfo}}-{{ userinfo.name }}-{{ score }}</div>
   <!-- <div>-{{ sets }}</div> -->
   <div>访问模块中的getters</div>
<p>{{ UpperCaseName }}</p>
<hr>
   <div>访问模块中的mutations</div>
   <button @click="updSettings([{ theme: 'black', bacc: 'green' }, '当前系统版本', 'windows11'])">修改设置</button>
    <hr />
    <Son1></Son1>
    <hr />
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'App',
  data () {
    return {
      inp: ''
    }
  },
  components: {
    Son1, Son2
  },
  created () {
    console.log(this.$store.state.title)
  },
  computed: {
    ...mapState(['count', 'title']),
    ...mapState('user', ['userinfo', 'score']),
    ...mapState('settings', ['sets', 'current', 'memo']),
    ...mapGetters(['filterList']),
    ...mapGetters('user', ['UpperCaseName'])
  },
  methods: {
    ...mapMutations(['setTitle', 'optCount']),
    ...mapMutations('settings', ['updSettings']),
    ...mapActions(['changeCountAction']),
    ...mapActions('user', ['setUserAction']),

    hdOptCount (e) {
      this.optCount(['=', +e.target.value])
    }

  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 1px solid black;
  padding: 10px;
}
</style>
